<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>自动点击控制台</title>
    <style>
        html, body { height: 105vh; }
        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Microsoft Yahei", sans-serif; margin: 0;  box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; }
        .btn { padding: 5px 14px; margin-right: 0; border: 1px solid #1c222d; background: #1c222d; color: #fff; cursor: pointer; border-radius: 3px; flex: 1 1 0; }
        .row { padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
        .row:first-child { gap: 6px; }
        .row:first-child .btn { flex: 1 1 0; min-width: 0; }
        .row:first-child .btn:nth-child(3) { flex: 1 1 0; }
        pre { background: #111; color: #0f0; padding: 12px;  overflow: auto; flex: 1 1 auto; min-height: 0; }
        
        /* 点位弹层关闭按钮：无背景，仅灰色 X */
        #points-close { background: transparent !important; border: 0 !important; color: #666 !important; padding: 0 8px !important; font-size: 20px; line-height: 1; }
        
        @media (max-width: 480px) {
            body { padding: 0; }
            .row { display: flex; gap: 8px; padding: 10px 5px 0 5px; }
            .btn { flex: 1 1 0; margin-right: 0; font-size: 12px; }
            pre { font-size: 12px; }
            #points-modal > div { width: 92vw !important; padding: 12px !important; }
            #points-list > div { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
            #points-list > div > div { white-space: nowrap; }
        }
    </style>
    <script src="/client.js" defer></script>
    </head>
<body>
    <div class="row">
        <button id="btn-points" class="btn">点位设置</button>
        <button id="btn-run" class="btn">启动</button>
        <button id="btn-restart" class="btn">重启</button>
    </div>
    <pre id="out">等待操作...</pre>

    <!-- 点位设置弹层（简单列表 + 单/双击切换） -->
    <div id="points-modal" style="position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:9998;padding: 0 25px;">
        <div style="position:relative;background:#fff;padding:16px;border-radius:8px;max-width:92vw;width:520px;max-height:80vh;overflow:auto;">
            <button id="points-close" aria-label="关闭" title="关闭" style="position:absolute;top:10px;right:10px;background:transparent;border:0;color:#666;font-size:20px;line-height:1;padding:0;">✕</button>
            <div style="display:flex;align-items:center;justify-content:center;margin-bottom:12px;">
                <strong>点位设置</strong>
            </div>
            <div id="points-list" style="display:flex;flex-direction:column;gap:8px;"></div>
            <div style="margin-top:12px;text-align:right;">
                <button id="points-save" class="btn">保存</button>
            </div>
        </div>
    </div>

</body>
</html>


